<template>
  <div>
    <component :is="one"></component>

    <div id="container">
      <div id="content2">
        <table width="100%" height="41" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td width="15" height="18" align="left" valign="top">
              <div align="left"></div>
            </td>
            <td width="385" align="left" valign="bottom" class="12">&nbsp;</td>
          </tr>
          <tr>
            <td height="4" colspan="2" align="left" valign="bottom"></td>
          </tr>
          <tr>
            <td height="15" align="left" valign="top">&nbsp;</td>
            <td height="15" align="left" valign="top" class="12">
              <table width="100%" height="20" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td height="20">
                    <div class="right_proaducts">我的位置&gt;&gt;科技项目申报&gt;登录用户列表<br />
                      <br />
                    </div>

                    <!--                  <DIV class=padding>
                    <DIV id=middlebody>-->
                    <table cellspacing="0" cellpadding="0" width="100%" border="0">
                      <tbody>
                        <tr>
                          <td>
                            <div align="left">|&nbsp;&nbsp;欢迎,admin&nbsp;&nbsp;|&nbsp;&nbsp;
                              <a class="table_t" href="#/">注销      </a>&nbsp;&nbsp;|&nbsp;&nbsp;
                              <a href="javascript:history.go(-1)">后退</a>&nbsp;&nbsp;|
                            </div>
                          </td>
                          <td>
                            <div align="center"><a href="#/admin/showusers">登录用户管理</a>
                            </div>
                          </td>
                          <td>
                            <div align="center"><a href="#/admin/showexperts">专家信息管理</a>
                            </div>
                          </td>
                          <td height="50">
                            <div align="center"><a href="#/admin/showunits">单位信息管理</a>
                            </div>
                          </td>
                          <td>
                            <div align="center"><a href="#/admin/showprojectCategorys">项目管理</a>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <table id="app" class="mars" cellspacing="1" cellpadding="0" width="100%" border="0">
                      <tbody>
                        <tr bgcolor="#fba661" height="30">
                          <td>
                            <div align="center">登录名</div>
                          </td>
                          <td>
                            <div align="center">用户组</div>
                          </td>
                          <td>
                            <div align="center">删除</div>
                          </td>
                        </tr>
                        <tr bgcolor="#e4f1fe" v-for="(user,i) in users">
                          <td bgcolor="#f3f3f3">
                            <div align="center">{{user.username}}</div>
                          </td>
                          <td bgcolor="#f3f3f3" v-if="user.gid=='1'">
                            <div align="center">管理员</div>
                          </td>
                          <td bgcolor="#f3f3f3" v-if="user.gid=='2'">
                            <div align="center">专家</div>
                          </td>
                          <td bgcolor="#f3f3f3" v-if="user.gid=='3'">
                            <div align="center">单位</div>
                          </td>
                          <td bgcolor="#f3f3f3" v-if="user.gid!='1'">
                            <div align="center"><button @click="deleteUser(i)">删除</button></div>
                          </td>
                        </tr>
                        <tr bgcolor="#e4f1fe">
                          <td bgcolor="#f3f3f3" colspan="3">
                            <div align="center"><a href="#/admin/adduser">添加用户</a></div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <div>
                      <div align="right"><a href="html"></a></div>
                    </div>
                  </td>
                </tr>
              </table>
              <br />
              <div class="table_wz"></div>
            </td>
          </tr>
        </table>
      </div>
    </div>

    <component :is="two"></component>
  </div>
</template>
<script>
  import aaa from '@/components/header.vue'
  import bbb from '@/components/footer.vue'
  import four from '../../util/four';
  const options = {
    data() {
      return {
        one: 'aaa',
        two: 'bbb',
        users: [],
      }
    },
    components: {
      aaa, bbb
    },
    mounted() {
      this.getAllUsers();
    },
    methods: {
      getAllUsers() {
        four.get("/users").then((res) => {
          this.users = res.data.data;
        })
      },
      deleteUser(i) {
        this.$confirm('此操作将永久删除此数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          four.delete("/users/" + this.users[i].uid).then((res) => {
            if (res.data.code == 20021) {
              this.$message.success("删除成功！");
              this.getAllUsers();
            }
            if (res.data.code == 20020) {
              this.$message.error("删除失败！");
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
    }
  }
  export default options;
</script>
<style scoped>
  a {
    text-decoration: none;
  }

  .router-link-active {
    text-decoration: none;
  }
</style>